<template>
	<view class="tabbar df">
		<view
			v-if="isAdd"
			:class="['tabbar-add', 'df', 'bfh', !isAddBg && 'fade-in', isAddBg && 'fade-out']"
			catchtouchmove="true"
			@click="handleAdd"
		>
			<view class="add-tips">{{config['name']}}</view>
			<view class="add-item">
				<view class="df" @click.stop="toAdd(1)">
					<image src="/static/img/tw.png"></image>
					<text>图文</text>
				</view>
				<view class="df" @click.stop="toAdd(2)">
					<image src="/static/img/sp.png"></image>
					<text>视频</text>
				</view>
<!-- 				<view class="df" @click="toAdd(3)">
					<image src="/static/img/yw.png"></image>
					<text>音文</text>
				</view> -->
			</view>
		</view>
		<view :class="['tabbar-box', 'df', !isAddBtn && 'bfw tb-bs']">
			<block v-for="(item,i) in tabBar" :key="i">
				<view v-if="(0 == i || 1 == i) && !isAddBtn" class="tabbar-item df" @click.stop="toTabbar(i)">
					<image class="icon" :src="i == currentPage ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<view v-if="2 == i" class="tabbar-item df" @click.stop="toTabbar(i)">
					<view class="add df" :style="'background:' + (isAddBtn ? '#fff' : '#000') + ';transform:' + (isAddBtn ? 'rotate(225deg)' : 'rotate(0deg)')">
						<image :src="isAddBtn ? item.selectedIconPath : item.iconPath"></image>
					</view>
				</view>
				<view v-if="3 == i && !isAddBtn" class="tabbar-item df" @click.stop="toTabbar(i)">
					<image class="icon" :src="i == currentPage ? item.selectedIconPath : item.iconPath"></image>
					<view v-if="currentMsg > 0" class="msg" :style="'padding:' + (currentMsg > 9 ? '0 10rpx' : '0')">{{(currentMsg > 99 ? "99+" : currentMsg)}}</view>
				</view>
				<view v-if="4 == i && !isAddBtn" class="tabbar-item df" @click.stop="toTabbar(i)">
					<image class="avatar" :src="i == currentPage ? item.selectedIconPath : item.iconPath" mode="aspectFill"></image>  <!-- :style="'border-color:' + (currentPage ? '#000' : '#ddd')" -->
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		props: {
			currentPage: { type: Number, default: 0 },
			currentMsg: { type: Number, default: 0 },
			currentCid: { type: Number, default: 0 },
			userAvatar: {
			type: String,
			default: uni.getStorageSync("userInfo").avatar,
			},
		},
		data() {
			return {
				config: uni.getStorageSync('config'),
				isAdd: !1,
				isAddBtn: !1,
				isAddBg: !1,
				tabBar: [
					{
						selectedIconPath: "/static/img/tabbar/1.png",
						iconPath: "/static/img/tabbar/11.png",
						pagePath: "/pages/tabbar/index",
					},
					{
						selectedIconPath: "/static/img/tabbar/7.png",
						iconPath: "/static/img/tabbar/77.png",
						pagePath: "/pages/tabbar/circle",
					},
					{
						selectedIconPath: "/static/img/tabbar/3.png",
						iconPath: "/static/img/tabbar/33.png",
					},
					{
						selectedIconPath: "/static/img/tabbar/4.png",
						iconPath: "/static/img/tabbar/44.png",
						pagePath: "/pages/tabbar/notice",
					},
					{ 
						pagePath: "/pages/tabbar/center" ,
						selectedIconPath: "/static/img/tabbar/6.png",
						iconPath: "/static/img/tabbar/66.png",
					},
				],
			}
		},
		created() {
		    uni.hideTabBar();
		},
		methods: {
		  handleAdd() {
			let that = this;
			that.setBarColor("#000000"),
			  (that.isAddBg = !0),
			  (that.isAddBtn = !1),
			  setTimeout(function () {
				that.isAdd = !1;
				that.isAddBg = !1;
			  }, 300);
		  },
		  toTabbar(a) {
			if(a != this.currentPage && 2 != a)
			{
				uni.switchTab({ url: this.tabBar[a].pagePath });
				uni.vibrateShort()
			}else{
				if(2 == a && this.isAdd){
					this.handleAdd();
				}else{
					if(!(0 != a && 1 != a)){
						this.$parent.refreshPath();
						uni.vibrateShort();
					}else{
						this.isAdd = !0;
						this.isAddBtn = !0;
						this.setBarColor("#ffffff");        
						uni.vibrateShort();
					}
				}
				
			}
		  },
		  toAdd(a) {
			let userInfo = uni.getStorageSync('user_info');			  
			if (userInfo == '' || userInfo == null || typeof(userInfo) == "undefined") {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return;
			}else{
				let that = this;
				let n_cid = '';
				if(that.currentCid>0) n_cid = '&cid=' + that.currentCid;
				that.setBarColor("#000000");
				uni.navigateTo({
					url: "/pages/dynamic/add?type=" + a + n_cid,
					success: function () {
						that.isAdd = !1;
						that.isAddBtn = !1;
					},
				});
			}


		  },
		  setBarColor(a) {
			uni.setNavigationBarColor({
			  frontColor: a,
			  backgroundColor: "#ffffff",
			  animation: { duration: 300, timingFunc: "easeIn" },
			});
		  },
		},
	}
</script>

<style>
	.tabbar{
	  position: fixed;
	  z-index: 998;
	  width: 100%;
	  bottom: max(env(safe-area-inset-bottom), 30rpx);
	  box-sizing: border-box;
	  justify-content: center;
	}
	.tabbar-box{
	  z-index: 998;
	  width: calc(100% - 120rpx);
	  height: 100rpx;
	  border-radius: 50rpx;
	  justify-content: space-around;
	}
	.tb-bs{
	  box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.06);
	  border: 1px solid #f8f8f8;
	}
	.tabbar-box .tabbar-item{
	  width: 20%;
	  height: 100rpx;
	  justify-content: center;
	  position: relative;
	}
	.tabbar-item .icon{
	  width: 48rpx;
	  height: 48rpx;
	}
	.tabbar-item .msg{
	  position: absolute;
	  top: 18rpx;
	  left: calc(50% + 8rpx);
	  min-width: 30rpx;
	  height: 30rpx;
	  line-height: 30rpx;
	  text-align: center;
	  font-size: 18rpx;
	  font-weight: 700;
	  color: #fff;
	  background: #fa5150;
	  border-radius: 30rpx;
	  border: 4rpx solid #fff;
	}
	.tabbar-item .avatar{
	  width: 48rpx;
	  height: 48rpx;
	  /* border-radius: 50%;
	  border-width: 4rpx;
	  border-style: solid;
	  background: #ddd; */
	}
	.tabbar-item .add{
	  width: 48rpx;
	  height: 48rpx;
	  border-radius: 50%;
	  justify-content: center;
	  transition: all 0.3s ease-in-out;
	}
	.tabbar-item .add image{
	  width: 16rpx;
	  height: 16rpx;
	}
	.tabbar .tabbar-add{
	  position: fixed;
	  z-index: 997;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  width: 100vw;
	  height: calc(100vh - 480rpx);
	  padding: 241rpx 0;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.tabbar-add .add-tips{
	  color: #555;
	  font-size: 24rpx;
	  font-weight: 700;
	}
	.tabbar-add .add-item view{
	  padding: 30rpx 60rpx;
	  color: #fff;
	  font-size: 28rpx;
	  font-weight: 700;
	}
	.tabbar-add .add-item view image{
	  width: 48rpx;
	  height: 48rpx;
	  margin-right: 10rpx;
	}

</style>